<template>
  <div class="pay-report">
    <div class="pay-report-start">
      <el-button
        type="warning"
        @click="startReport"
        style="width:15%;font-size:18px"
        >开始本月上报</el-button
      >
    </div>
    <div class="pay-report-header">
      <el-radio-group v-model="radio1" @change="requestData">
        <el-radio-button label="未上报"></el-radio-button>
        <el-radio-button label="已上报"></el-radio-button>
      </el-radio-group>
    </div>
    <div class="pay-report-table">
      <table-list
        :toTableData="tableData"
        :tableHeader="tableHeader"
        :deleteEdit="deleteEdit"
        :btn1="btn1"
        :btn2="btn2"
        @btn2="handleEdit"
      ></table-list>
    </div>

    <!-- 弹出框表单 -->
    <div class="pay-from">
      <el-dialog
        title="上报水电费用"
        :visible.sync="dialogFormVisible"
        width="30%"
      >
        <el-form
          :model="ruleForm"
          status-icon
          :rules="rules"
          ref="ruleForm"
          label-width="50px"
          class="demo-ruleForm"
        >
          <el-form-item label="水费" prop="water">
            <el-input v-model="ruleForm.water" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="电费" prop="electric">
            <el-input v-model="ruleForm.electric" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')"
              >提交</el-button
            >
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
    <!-- <el-alert title="成功提示的文案" type="success"> </el-alert> -->
  </div>
</template>

<script>
import { request } from "@/network/request.js";
import TableList from "@/components/common/TableList.vue";
import { GeyTime } from "@/util/getTime";
export default {
  name: "vueName",
  data() {
    let patter = /((^[1-9]\d*)|^0)(\.\d{0,2}){0,1}$/;
    let isNumber = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("不能为空"));
      } else if (!patter.test(value)) {
        return callback(new Error("必须非负整数或至多保留两位小数"));
      } else {
        callback();
      }
    };
    return {
      radio1: "未上报",
      tableHeader: [
        { prop: "name", label: "姓名" },
        { prop: "address", label: "地址" },
        { prop: "water", label: "水费" },
        { prop: "electric", label: "电费" },
        { prop: "report_time", label: "上报时间" },
      ],
      tableData: [], //传递给子组件数据
      deleteEdit: {
        options: 1,
        delete: 0,
        edit: 1,
      },
      btn1: "删除",
      btn2: "上报",
      rowOpenid: "",
      dialogFormVisible: false,
      formLabelWidth: "100px",
      ruleForm: {
        water: "",
        electric: "",
      },
      rules: {
        water: [{ validator: isNumber, trigger: "blur" }],
        electric: [{ validator: isNumber, trigger: "blur" }],
      },
    };
  },
  components: {
    TableList,
  },
  created() {
    this.requestData();
  },
  computed: {},
  methods: {
    requestData() {
      // console.log("555");
      return new Promise((resove, reject) => {
        request({
          url: "/pay-month", //传入confing,在baseURL后面的值
        })
          .then((res) => {
            if (this.radio1 == "未上报") {
              this.deleteEdit.options = 1;
              this.tableData = res.data.data.filter((s) => s.status < 0);
              this.tableData = this.tableData.map((s) => {
                if (s.water < 0) {
                  s.water = "待上报";
                  // return s;
                }
                if (s.electric < 0) {
                  s.electric = "待上报";
                  // return s;
                }
                if (s.report_time < 0) {
                  s.report_time = "待上报";
                  // return s;
                }
                return s;
              });
            } else if (this.radio1 == "已上报") {
              this.tableData = res.data.data.filter((s) => s.status > 0);
              this.deleteEdit.options = 0;
            }

            // console.log(this.tableData);
            resove();
          })
          .catch((err) => {
            console.log(err);
            reject();
          });
      });
    },
    startReport() {
      request({
        url: "/setDelete_pay_month", //传入confing,在baseURL后面的值
        method: "POST",
      })
        .then((res) => {
          console.log(res + "22"); //res中含有请求的data等数据
          this.requestData();
        })
        .catch((err) => {
          console.log(err);
        });
    },

    handleEdit(row) {
      this.dialogFormVisible = true;
      this.rowOpenid = row.openid;
      console.log(row);
    },
    // 提交
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // alert("submit!");
          // console.log(this.numberValidateForm.water);
          // console.log(this.numberValidateForm.electric);
          this.dialogFormVisible = false;
          let waterMoney = this.returnFloat(this.ruleForm.water);
          let electricMoney = this.returnFloat(this.ruleForm.electric);
          let date = new GeyTime();
          request({
            url: "/change_pay_month", //传入confing,在baseURL后面的值
            method: "POST",
            data: {
              openid: this.rowOpenid,
              water: waterMoney,
              electric: electricMoney,
              status: 1,
              report_time: date.dateNow(),
            },
          })
            .then((res) => {
              // console.log(res); //res中含有请求的data等数据
              this.requestData();
            })
            .catch((err) => {
              console.log(err);
            });
          setTimeout(() => {
            this.resetForm(formName);
          }, 1000);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //数字保留两位小数方法
    returnFloat(value) {
      // let value =Math.floor(value)
      let s = value.toString().split(".");
      console.log(s);
      if (s.length == 1) {
        value = value.toString() + ".00";
        return value;
      }
      if (s.length > 1) {
        if (s[1].length < 2) {
          value = value.toString() + "0";
        }
        return value;
      }
    },

    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style lang="scss">
@import "@/assets/styles/global.scss";
.pay-report {
  box-sizing: border-box;
  // margin: 20px;
  width: 100%;
  // height: 100%;
  padding: 20px;
  .pay-report-start {
    width: 100%;
    height: 70px;
    background-color: #ffffff;
    margin-bottom: 10px;
    @include center;
  }

  .pay-report-table {
    // height: 100%;
    background-color: #ffffff;
    // padding: 0 10px;
    box-sizing: border-box;
    // overflow: scroll;
    // overflow-y: scroll;
    .pagination {
      padding-top: 10px;
      padding-bottom: 100px;
      display: flex;
      @include right;
      background-color: #ffffff;
    }
  }
}
</style>
